<template>
	<div class="consult">
		<div class="backImg">
			<van-image
				width="100%"
				height="180"
				fit="cover"
				radius='4px'
				:src='topImg'
			/>
		</div>

		 <p class="cardTitle">名医在线</p>
		<div>
			<van-tabs v-model:active="active" line-height='2px' @change='getDoctor' color="#1365b7" title-active-color="#1365b7">
			    <van-tab v-for="val in departments" :title="val.physiciansCategory">
					<van-list>
					  <van-cell v-for="item in val.list" :key="item" :title="item.title" class="doctorMsg">
					  	<template #title>
					  		 <van-row gutter="30">
					  		   <van-col span="4">
					  			  <van-image
					  				  width="68"
									  height="68"
					  				  fit="fill"
					  				  round
					  				  :src="require('../../assets/doctor.png')"
					  			  />
					  		   </van-col>
					  		   <van-col span="20" class="rightArea">
                                     <!-- <i :class="state=='true' ? 'dot' : 'dot-out'"></i><span :class="state=='true' ? 'state':'state-out'">{{state=='true' ? '在线': '离线'}}</span> -->
					  			  <h3 class="custom-title">{{ item.name }} <span class="title">{{ item.title }} {{ item.department }}</span></h3>
					  			  <div class="source">
					  				<span>擅长: {{ item.strengths }}</span>
					  			  </div>
									<van-button size="small" plain round type="primary" color="#1365b7" style="margin:8px 0 8px;width:46%" @click="goInteractive(item.name, item.docImg, state)">立即咨询</van-button>
					  		   </van-col>
					  		 </van-row>
					  	</template>
					  </van-cell>
					</van-list>
			    </van-tab>
			</van-tabs>
		</div>
		<div>
			
		</div>
	</div>
</template>

<script>
import { getDepartmentDoctor,getDoctorMsg } from '../../request/api/consultApi'
import { Toast } from "vant"
	export default {
		name: 'consult',
		data() {
			return {
				active: '0',
				topImg: require('../../assets/咨询.gif'),
				departments: [
					{
						physiciansCategory: '内科',
						list: [
						    // {
						    //     id: "001",
						    //     docImg: require('../../assets/doctor.png'),
						    //     name: "刘铁柱",
							// 	title: '副主任医师',
							// 	department: '内科',
							// 	unit: '广西国际壮医医院',
							// 	strengths: '头痛、失眠、高血压、高血脂症、便秘、月经不调、更年期综合征、咳嗽、湿疹、胃炎'
						    // }
						],
					},
					{
						physiciansCategory: '中医科',
						list: [],
					},
					{
						physiciansCategory: '营养科',
						list: [],
					},
					{
						physiciansCategory: '心理科',
						list: [],
					},
					{
						physiciansCategory: '全科',
						list: []
					},
				],
				
				loading : false,
				finished: false,
				state: ''
			}
		},
		sockets: {
			connect: function () {
				console.log('socket connected')
			},
			reconnect: function () {
				console.log('正在重连')
			},
			error: function (error) {
				console.log(error)
			}
		},
		watch: {
			
		},
		mounted() {
			this.state = sessionStorage.getItem('state')
			console.log(this.state)
		},
		methods: {
			// 跳转咨询
			goInteractive(name, docimg, state) {
				let conname = encodeURIComponent(name)
				this.$router.push({path: '/interactive', query: {name: conname, docimg, state}})
				if (name == '默认群聊') {
					this.$store.commit('changeChatType', 'group')
				} else {
					this.$store.commit('changeChatType', 'private')
				}
				this.$store.commit('setUserInfo', {name: name, img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0159315f8ea34911013f31104bf9b8.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655452050&t=3a93924783fa7287a23f3f75838fe195'})
			},
			// 点击标签时获取对应科室医师
			getDoctor(name, title) {
				Toast.loading({
                    duration: 0, // 持续展示 toast
                    message: '加载中...',
                    forbidClick: true,
                })
				let department = title
				getDepartmentDoctor({department}).then(res => {
					let {data} = res
					if (data) {
						if (data.code === 0) {
							const departments = this.departments
							const doc = data.doctorList
							let a = departments.filter(i => {
								return i.physiciansCategory === department
							})
							doc.forEach(item => {
								item.title = this.format(item.title)
							})
							a[0].list = doc
							Toast.clear()
						} 
					} else {
						Toast.clear()
						Toast({
							message: res.msg,
							icon: 'fail',
						})
					}
				}).catch(err => {})
			},
			// 职称格式化
			format(i) {
				switch(i) {
                    case '0': 
                        return '住院医师';
                    case '1': 
                        return '主治医师';
                    case '2': 
                        return '副主任医师';
                    case '3': 
                        return '主任医师';
                    default: 
                        return '无';
                }
			}
		},
	}
</script>

<style lang="scss" scoped>
	.custom-title {
		word-spacing: 8px;
		color: #333;
		position: relative;
	}
	.consult {
		background-color: #fff;
		height: 100%;
		padding-bottom: 0px;
		.backImg {
			padding: 10px;
		}
		.doctorMsg {
		    margin: 6px 0;
		}
		.rightArea {
			margin-top: 8px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 14px;
				color: #666;
			}
			.dot {
				display: inline-block;
				height: 6px;
				width: 6px;
				border-radius: 50%;
				background-color: #65dab0;
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translateY(-50%);
			}
			.dot-out {
				display: inline-block;
				height: 6px;
				width: 6px;
				border-radius: 50%;
				background-color: #b4b4b4;
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translateY(-50%);
			}
			.state {
				font-size: 12px;
				font-weight: lighter;
				color: #65dab0;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.state-out {
				font-size: 12px;
				font-weight: lighter;
				color: #b4b4b4;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.source {
				margin-top: 4px;
				span {
					font-size: 14px;
					transform: scale(0.8);
					color: #666;
				}
			}
		}
		.van-tabs {
			padding-bottom: 50px;
		}
		::v-deep .van-tab__text {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 8px;
		}
	}
	.cardTitle {
		text-align: center;
		margin: 16px auto 10px;
        font-size: 18px;
        font-weight: 600;
    }
	
</style>